<template>
  <div>
    <!-- 学科 -->
    <!-- 页面主体卡片试图结构 -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <!-- 学科名称区域 -->
          <el-col :span="2">
            <span class="subjacketName">学科名称</span>
          </el-col>
          <!-- 输入内容的input框 -->
          <el-col :span="4">
            <span>
              <el-input v-model="queryInfo.subjectName"></el-input>
            </span>
          </el-col>
          <!-- 清除搜索按钮 -->
          <el-col :span="6">
            <el-button size="medium" @click="cleSearch">清除</el-button>
            <el-button type="primary" size="medium" @click="SubSearch">搜索</el-button>
          </el-col>
          <!-- 新增学科按钮区域 -->
          <el-col :span="3" :offset="9">
            <el-button type="success" icon="el-icon-edit" @click="addSubject">新增学科</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 提示条数区域 -->
      <el-alert :title="`一共${counts}条数据`" type="info" show-icon close-text="."></el-alert>
      <!-- 数据展示区域 -->
      <el-table :data="SubList" style="width: 100% " border stripe>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="100"></el-table-column>
        <el-table-column prop="username" label="创建者" width="180"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200"></el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="180" v-slot="scope">
          <span v-show="scope.row.isFrontDisplay==1">是</span>
          <span v-show="scope.row.isFrontDisplay==0">否</span>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="80"></el-table-column>
        <el-table-column prop="tags" label="标签" width="80"></el-table-column>
        <el-table-column prop="totals" label="题目数量" width="180"></el-table-column>
        <el-table-column prop="date" label="操作" width="265" v-slot="scope">
          <el-button type="text" @click="classify(scope.row.id)">学科分类</el-button>
          <el-button type="text" @click="Subjectlab(scope.row)">学科标签</el-button>
          <el-button type="text" @click="alterSUb(scope.row)">修改</el-button>
          <el-button type="text" @click="deleteSub(scope.row.id)">删除</el-button>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="block">
        <el-pagination
          :page-sizes="[5, 10, 15, 20]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        ></el-pagination>
      </div>
      <!-- 新增学科弹出框区域 -->
      <el-dialog title="提示" :visible.sync="addsubdialogVisible" width="30%">
        <!-- 弹出框的内容区域 -->
        <el-form ref="form" :model="addSubjectdata" label-width="80px">
          <el-form-item label="学科名称">
            <el-input v-model="addSubjectdata.subjectName"></el-input>
          </el-form-item>
          <!-- 弹出框的开关 -->
          <el-form-item label="是否显示">
            <el-switch
              v-model="addSubjectdata.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addsubdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addsubBtn">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改学科的弹窗框 -->
      <el-dialog title="提示" :visible.sync="alterSUbdialogVisible" width="30%">
        <el-form ref="form" :model="addSubjectdata" label-width="80px">
          <el-form-item label="学科名称">
            <el-input v-model="alterSUbject.subjectName"></el-input>
          </el-form-item>
          <!-- 修改学科弹出框的开关 -->
          <el-form-item label="是否显示">
            <el-switch
              v-model="alterSUbject.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="alterSUbdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="alterSUbBtn">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
// 导入请求学科数据列表
import {
  getSubject,
  addsub,
  deleteSubject,
  alterSubject
} from '@/api/subject/subject.js'
export default {
  name: 'Subject',
  data() {
    return {
      searchInput: '',
      // 请求数据
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectName: null
      },
      // 页面获取道德数据
      SubList: [],
      // 总数据条数
      counts: 0,
      // 新增学科弹出框的显示和隐藏状态
      addsubdialogVisible: false,
      // 新增学科的弹出框的内容绑定
      addSubjectdata: {
        subjectName: '',
        // 弹出框的开关的数据的绑定
        isFrontDisplay: '1'
      },
      // 修改学科
      alterSUbject: {
        id: 0,
        isFrontDisplay: '1',
        subjectName: null
      },
      // 修改学科的弹出框开关
      alterSUbdialogVisible: false
    }
  },
  created() {
    this.subjectList()
  },
  computed: {},
  methods: {
    // 获取页面数据
    async subjectList() {
      const { data } = await getSubject(this.queryInfo)
      // 赋值数据
      this.SubList = data.items
      // 赋值总数据条数
      this.counts = data.counts
      console.log(data)
    },
    // 清除按钮
    cleSearch() {
      this.queryInfo.subjectName = ''
      this.subjectList()
    },
    // 搜索按钮
    SubSearch() {
      this.subjectList()
    },
    // 更改每页数据条数
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize
      this.subjectList()
      console.log(this.queryInfo.pagesize)
    },
    // 更改选中页
    handleCurrentChange(newpage) {
      this.queryInfo.page = newpage
      this.subjectList()
      console.log('this.queryInfo.page')
    },
    // 新增学科按钮
    addSubject() {
      console.log('新增学科')
      this.addsubdialogVisible = true
    },
    // 新增学科按钮弹框的确定按钮
    async addsubBtn() {
      const { data } = await addsub(this.addSubjectdata)
      console.log(data)
      this.addsubdialogVisible = false
      this.subjectList()
    },
    // 学科分类按钮
    classify(id) {
      this.$router.push({
        path: '/directorys',
        query: {
          sbjdataid: id
        }
      })
    },
    // 许可标签
    Subjectlab(e) {
      this.$router.push({
        path: '/tags',
        query: {
          sbjdataid: e.id
        }
      })
    },
    // 删除学科按钮
    deleteSub(id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteSubject(id)
          this.subjectList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改学科按钮
    alterSUb(sub) {
      this.alterSUbject.id = sub.id
      this.alterSUbject.subjectName = sub.subjectName
      this.alterSUbdialogVisible = true
    },
    // 修改学科的确定按钮
    alterSUbBtn() {
      alterSubject(this.alterSUbject)
      this.alterSUbdialogVisible = false
      this.subjectList()
    }
  }
}
</script>

<style  lang="less" scoped>
.box-card {
  .clearfix {
    .el-col {
      padding-left: 20px;
      /deep/.el-input__inner {
        height: 35px;
      }
      // 修改学科名称的样式
      .subjacketName {
        font-size: 16px;
        font-weight: 700;
        display: block;
        margin-top: 9px;
      }
      /deep/ .el-link--inner {
        margin-left: 20px !important ;
      }
    }
  }
  // 提示和页码的距离
  .el-table {
    margin: 20px 0;
  }
}
</style>
